<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="myForm" action="https://example.com/api" method="post">
			<fieldset>
				<legend>个人信息</legend>
				用户名：<input type="text" id="name" name="name" required /><br />
				密码：<input type="password" id="pwd" name="password" required /><br />
			</fieldset>
			<fieldset>
				<legend>书单</legend>

				<div>
					<input type="checkbox" id="darker1" name="darker1" checked />
					<label for="darker1">暗黑者I</label>
				</div>

				<div>
					<input type="checkbox" id="darker2" name="darker2" />
					<label for="darker2">暗黑者II</label>
				</div>

				<div>
					<input type="checkbox" id="darker3" name="darker3" />
					<label for="darker3">暗黑者III</label>
				</div>
			</fieldset>

			<div>
				<input type="submit" value="订阅" />
				<input type="reset" value="清除" />
			</div>
		</form>
		<!-- http://127.0.0.1:8848/frontend-practice//playground/form.html -->
	</body>
	<script>
		var form = document.getElementById('myForm');

		// 监听表单的 submit 事件  
		form.addEventListener('submit', function(event) {
			// 在这里执行你需要的操作  
			// 比如验证表单数据  

			console.log(`[submit] form:`)
			console.log(form);

			// 如果你想阻止表单的默认提交行为（比如，你想用 AJAX 提交表单），你可以调用 event.preventDefault() 方法  
			event.preventDefault();

			// 注意：如果你调用了 event.preventDefault()，表单将不会按照 action 属性指定的 URL 提交数据  
			// 你可以在这里添加自定义的提交逻辑，比如使用 fetch 或 XMLHttpRequest 发送数据到服务器  

			// 示例：简单的验证逻辑  
			var name = document.getElementById('name').value;
			var pwd = document.getElementById('pwd').value;

			if (!name || !pwd) {
				alert('用户名和密码不能为空！');
				event.preventDefault(); // 阻止表单提交  
			} else {
				// 表单数据有效，可以提交或进行其他操作  
				console.log('表单提交成功！');
			}
		});
	</script>
</html>